<template>
    <view>
        <form @submit="savepubinfo" report-submit>
            <view class="container">
                <view class="main">
                    <!--
        <view class="title">
          企业注册  【当前城市:{{city}}】
        </view>
        -->
                    <view class="list">
                        <view class="item">
                            <view class="name">选择区域</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="arealist" range-key="name" @change="bindAreaChange">
                                    <view class="picker">
                                        {{ arealist[areaidindex].name ? arealist[areaidindex].name : '请选择地区' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">企业名称</view>
                            <view class="selectitem">
                                <input
                                    :value="companyinfo.companyname ? companyinfo.companyname : ''"
                                    type="text"
                                    name="companyname"
                                    placeholder="请输入企业名称"
                                    cursor-spacing="140"
                                />
                            </view>
                        </view>
                        <view class="item">
                            <view class="name">企业行业</view>
                            <view class="selectitem">
                                <input
                                    :value="companyinfo.companycate ? companyinfo.companycate : ''"
                                    type="text"
                                    name="companycate"
                                    placeholder="请输入企业行业"
                                    cursor-spacing="140"
                                />
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">企业性质</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="companytype" range-key="" @change="bindCompanytypeChange">
                                    <view class="picker">
                                        {{ companytype[companytypeindex] ? companytype[companytypeindex] : '请选择企业性质' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">人员规模</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="companyworker" range-key="" @change="bindCompanyworkerChange">
                                    <view class="picker">
                                        {{ companyworker[companyworkerindex] ? companyworker[companyworkerindex] : '请选择人员规模' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">负责人</view>
                            <view class="selectitem">
                                <input
                                    type="text"
                                    :value="companyinfo.mastername ? companyinfo.mastername : ''"
                                    name="mastername"
                                    placeholder="请输入负责人"
                                    cursor-spacing="140"
                                />
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">电 话</view>
                            <view class="selectitem">
                                <input type="text" :value="companyinfo.tel ? companyinfo.tel : ''" name="tel" placeholder="请输入电话" cursor-spacing="140" />
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">地址</view>
                            <view class="selectitem">
                                <input type="text" :value="address" name="address" placeholder="请输入地址" />
                                <button class="getpos" @tap="getpostion">获取位置</button>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="main">
                    <view class="title">公司介绍</view>
                    <view class="list">
                        <view class="item">
                            <view class="selectitem" style="width: 100%; height: 500rpx">
                                <editor id="editor" class="ql-container" :placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady"></editor>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="uploadlist">
                    <view class="title">
                        <view>企业LOGO</view>
                        <view>(禁止上传不良图片)</view>
                    </view>
                    <view class="item">
                        <view class="uploadimg" @tap="chooseImg" data-id="1">
                            <image src="/static/imgs/icon/upload.png"></image>
                            <view class="uploadtitle">上传照片最多1张</view>
                        </view>
                    </view>
                </view>

                <view class="uploadlist" :style="'display:' + show1 + ';'">
                    <view class="imgsbox">
                        <view class="weui-uploader">
                            <view class="img-v">
                                <view class="img" v-for="(item, index) in imgs1" :key="index">
                                    <image :src="item" :data-index="index" mode="aspectFill" @tap="previewImg1"></image>

                                    <view class="delete-btn" :data-index="index" @tap.stop.prevent="deleteImg1">
                                        <image class="imgx" src="/static/imgs/icon/x.png" style="width: 15rpx; height: 15rpx"></image>
                                        删除
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="uploadlist">
                    <view class="title">
                        <view>企业执照或相关证件</view>
                        <view>(禁止上传不良图片)</view>
                    </view>
                    <view class="item">
                        <view class="uploadimg" @tap="chooseImg" data-id="2">
                            <image src="/static/imgs/icon/upload.png"></image>
                            <view class="uploadtitle">上传照片最多9张</view>
                        </view>
                    </view>
                </view>

                <view class="uploadlist" :style="'display:' + show2 + ';'">
                    <view class="imgsbox">
                        <view class="weui-uploader">
                            <view class="img-v">
                                <view class="img" v-for="(item, index) in imgs2" :key="index">
                                    <image :src="item" :data-index="index" mode="aspectFill" @tap="previewImg1"></image>

                                    <view class="delete-btn" :data-index="index" @tap.stop.prevent="deleteImg2">
                                        <image class="imgx" src="/static/imgs/icon/x.png" style="width: 15rpx; height: 15rpx"></image>
                                        删除
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="uploadlist">
                    <view class="title">
                        <view>企业环境照片</view>
                        <view>(禁止上传不良图片)</view>
                    </view>
                    <view class="item">
                        <view class="uploadimg" @tap="chooseImg" data-id="3">
                            <image src="/static/imgs/icon/upload.png"></image>
                            <view class="uploadtitle">上传照片最多9张</view>
                        </view>
                    </view>
                </view>

                <view class="uploadlist" :style="'display:' + show3 + ';'">
                    <view class="imgsbox">
                        <view class="weui-uploader">
                            <view class="img-v">
                                <view class="img" v-for="(item, index) in imgs3" :key="index">
                                    <image :src="item" :data-index="index" mode="aspectFill" @tap="previewImg1"></image>

                                    <view class="delete-btn" :data-index="index" @tap.stop.prevent="deleteImg3">
                                        <image class="imgx" src="/static/imgs/icon/x.png" style="width: 15rpx; height: 15rpx"></image>
                                        删除
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="doagree">
                    <checkbox-group @change="doagree">
                        <checkbox value="1" checked="" />
                        我已阅读并同意
                        <text style="color: blue" @tap="goHousexy">《企业入驻协议》</text>
                    </checkbox-group>
                </view>
            </view>

            <view class="weixinmao-float">
                <view class="weixinmao-foot">
                    <button class="footer" formType="submit">保存企业信息</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Company } from '../companydetail/company-model.js';
var company = new Company();
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
    data() {
        return {
            formats: {},
            readOnly: false,
            placeholder: '开始输入...',
            editorHeight: 300,
            keyboardHeight: 0,
            isIOS: false,
            logoimglist: [],
            imagelist: [],
            cardimglist: [],
            imgs1: [],
            companyimglist: [],
            arealist: [],
            areaidindex: -1,
            areaid: 0,
            lat: 0,
            lng: 0,
            companyworker: ['1-5人', '5-10人', '10-20人', '20-50人', '50人以上'],
            companyworkerindex: -1,
            companyworkername: '',
            companytype: ['私营', '国有', '政府机关', '事业单位', '股份制', '上市公司', '中外合资/合作', '外商独资/办事处', '非盈利机构'],
            companytypeindex: -1,
            companytypename: '',
            isagree: 0,
            show1: 'none',
            show2: 'none',
            show3: 'none',

            companyinfo: {
                companyname: false,
                companycate: false,
                mastername: false,
                tel: false
            },

            address: '',
            imgs2: '',
            imgs3: '',
            Index: 0,
            name: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;
        that.id = options.id;
        uni.setNavigationBarTitle({
            title: '编辑企业信息'
        });
        const platform = uni.getSystemInfoSync().platform;
        const isIOS = platform === 'ios';
        this.setData({
            isIOS
        });
        this.updatePosition(0);
        let keyboardHeight = 0;
        uni.onKeyboardHeightChange((res) => {
            if (res.height === keyboardHeight) {
                return;
            }
            const duration = res.height > 0 ? res.duration * 1000 : 0;
            keyboardHeight = res.height;
            setTimeout(() => {
                uni.pageScrollTo({
                    scrollTop: 0,
                    success() {
                        that.updatePosition(keyboardHeight);
                        that.editorCtx.scrollIntoView();
                    }
                });
            }, duration);
        });

        //初始化导航数据

        var cityinfo = uni.getStorageSync('cityinfo');
        if (cityinfo) {
            uni.setStorageSync('city', cityinfo.name);
            that.initpage();
        } else {
            //获取信息
            qqmapsdk = new QQMapWX({
                key: '5D3BZ-J55WF-SFPJJ-NI6PG-YN2ZO-M4BHX' // 必填
            });

            uni.getLocation({
                type: 'gcj02',
                // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
                success: function (res) {
                    qqmapsdk.reverseGeocoder({
                        location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                        },
                        success: function (addressRes) {
                            var address = addressRes.result.address_component.city;
                            var city = address.substr(0, address.length - 1);
                            //  console.log(city);
                            uni.setStorageSync('city', city);
                            that.initpage();
                        }
                    });
                },
                fail: function () {
                    // fail

                    that.initpage();
                },
                complete: function () {
                    // complete
                }
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        initpage: function () {
            var that = this;
            var city;
            city = uni.getStorageSync('city');
            var ctoken = uni.getStorageSync('ctoken');
            var params = {
                city: city,
                ctoken: ctoken
            };
            company.getCompanyDetailData((data) => {
                that.companytypeindex = isHasElementOne(that.companytype, data.companyinfo.companytype);
                that.companytypename = data.companyinfo.companytype;
                that.companyworkerindex = isHasElementOne(that.companyworker, data.companyinfo.companyworker);
                that.companyworkername = data.companyinfo.companyworker;
                that.areaidindex = isHasElementTwo(data.arealist, data.companyinfo.areaid);
                console.log(that.areaidindex);
                that.areaid = data.companyinfo.areaid;
                const query = uni.createSelectorQuery();
                query
                    .select('#editor')
                    .context(function (res) {
                        res.context.setContents({
                            html: data.companyinfo.content
                        });
                        that.editorCtx = res.context;
                        uni.pageScrollTo({
                            scrollTop: 0,
                            success: () => {
                                that.editorCtx.scrollIntoView();
                            }
                        });
                    })
                    .exec();
                if (data.companyinfo.thumb != '') {
                    that.logoimglist.push(data.companyinfo.thumb);
                    that.imgs1.push(data.companyinfo.thumb);
                    that.show1 = 'block';
                }
                that.cardimglist = data.companyinfo.cardimg;
                that.companyimglist = data.companyinfo.companyimg;
                that.imgs2 = that.cardimglist;
                that.show2 = 'block';
                that.imgs3 = that.companyimglist;
                that.show3 = 'block';
                that.setData({
                    companyinfo: data.companyinfo,
                    arealist: data.arealist,
                    address: data.companyinfo.address,
                    companytypeindex: that.companytypeindex,
                    companyworkerindex: that.companyworkerindex,
                    areaidindex: that.areaidindex,
                    imgs1: that.imgs1,
                    show1: that.show1,
                    imgs2: that.imgs2,
                    show2: that.show2,
                    imgs3: that.imgs3,
                    show3: that.show3
                });
            }, params);
        },

        bindAreaChange: function (e) {
            var arealist = this.arealist;
            if (arealist) {
                this.areaid = arealist[e.detail.value].id;
                this.areaidindex = e.detail.value;
            }
            this.setData({
                arealist: arealist,
                areaidindex: e.detail.value
            });
        },

        bindCompanytypeChange: function (e) {
            var companytype = this.companytype;
            if (companytype) {
                this.companytypeindex = e.detail.value;
                this.companytypename = companytype[e.detail.value];
            }
            this.setData({
                companytype: companytype,
                companytypeindex: e.detail.value
            });
        },

        getpostion: function () {
            var that = this;
            uni.chooseLocation({
                success: function (res) {
                    that.lat = res.latitude;
                    that.lng = res.longitude;
                    that.setData({
                        address: res.name
                    });
                },
                fail: function (res) {
                    // fail
                    console.log(res);
                },
                complete: function () {
                    // complete
                }
            });
        },

        bindCompanyworkerChange: function (e) {
            var companyworker = this.companyworker;
            if (companyworker) {
                this.companyworkerindex = e.detail.value;
                this.companyworkername = companyworker[e.detail.value];
            }
            this.setData({
                companyworker: companyworker,
                companyworkerindex: e.detail.value
            });
        },

        updatePosition(keyboardHeight) {
            const toolbarHeight = 50;
            const { windowHeight, platform } = uni.getSystemInfoSync();
            let editorHeight = keyboardHeight > 0 ? windowHeight - keyboardHeight - toolbarHeight : windowHeight;
            this.setData({
                editorHeight,
                keyboardHeight
            });
        },

        calNavigationBarAndStatusBar() {
            const systemInfo = uni.getSystemInfoSync();
            const { statusBarHeight, platform } = systemInfo;
            const isIOS = platform === 'ios';
            const navigationBarHeight = isIOS ? 44 : 48;
            return statusBarHeight + navigationBarHeight;
        },

        onEditorReady() {
            const that = this;
            console.log('fffffff');
            uni.createSelectorQuery()
                .in(uni)
                .select('#editor')
                .context(function (res) {
                    that.editorCtx = res.context;
                })
                .exec();
        },

        blur() {
            this.editorCtx.blur();
        },

        format(e) {
            let { name, value } = e.target.dataset;
            if (!name) {
                return;
            }
            // console.log('format', name, value)
            this.editorCtx.format(name, value);
        },

        onStatusChange(e) {
            const formats = e.detail;
            console.log(formats);
            this.setData({
                formats
            });
        },

        insertDivider() {
            this.editorCtx.insertDivider({
                success: function () {
                    console.log('insert divider success');
                }
            });
        },

        clear() {
            this.editorCtx.clear({
                success: function (res) {
                    console.log('clear success');
                }
            });
        },

        removeFormat() {
            this.editorCtx.removeFormat();
        },

        insertDate() {
            const date = new Date();
            const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            this.editorCtx.insertText({
                text: formatDate
            });
        },

        insertImage() {
            const that = this;
            uni.chooseImage({
                count: 1,
                success: function (res) {
                    that.editorCtx.insertImage({
                        src: res.tempFilePaths[0],
                        data: {
                            id: 'abcd',
                            role: 'god'
                        },
                        width: '80%',
                        success: function () {
                            console.log('insert image success');
                        }
                    });
                }
            });
        },

        deleteImg1: function (e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
            that.logoimglist = [];
            that.setData({
                imgs1: [],
                show1: 'none'
            });
            console.log(index);
        },

        deleteImg2: function (e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
            var cardimglist = [];
            var imgs2 = [];
            for (var i = 0; i < that.cardimglist.length; i++) {
                if (i != index) {
                    cardimglist.push(that.cardimglist[i]);
                    imgs2.push(that.imgs2[i]);
                }
            }
            that.cardimglist = cardimglist;
            that.imgs2 = imgs2;
            that.setData({
                imgs2: imgs2
                // show2: 'none'
            });

            if (that.cardimglist.length == 0) {
                that.setData({
                    show2: 'none'
                });
            }
        },

        deleteImg3: function (e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
            var companyimglist = [];
            var imgs3 = [];
            for (var i = 0; i < that.companyimglist.length; i++) {
                if (i != index) {
                    companyimglist.push(that.companyimglist[i]);
                    imgs3.push(that.imgs3[i]);
                }
            }
            that.companyimglist = companyimglist;
            that.imgs3 = imgs3;
            that.setData({
                imgs3: imgs3
                // show2: 'none'
            });

            if (that.companyimglist.length == 0) {
                that.setData({
                    show3: 'none'
                });
            }
        },

        savepubinfo: function (e) {
            var that = this;
            var content = '';
            that.editorCtx.getContents({
                success: (res) => {
                    console.log(res.html);
                    content = res.html;
                    if (that.isagree == 0) {
                        uni.showModal({
                            title: '提示',
                            content: '请先同意企业入驻协议',
                            showCancel: false,
                            success: function (res) {}
                        });
                        return;
                    }
                    var companyname = e.detail.value.companyname;
                    var companycate = e.detail.value.companycate;
                    var companytype = that.companytypename;
                    var companyworker = that.companyworkername;
                    var mastername = e.detail.value.mastername;
                    var tel = e.detail.value.tel;
                    var address = e.detail.value.address;
                    var areaid = that.areaid;
                    if (areaid == 0) {
                        uni.showModal({
                            title: '提示',
                            content: '请选择区域',
                            showCancel: false
                        });
                        return;
                    }
                    if (companyname == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入企业名称',
                            showCancel: false
                        });
                        return;
                    }
                    if (mastername == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入负责人',
                            showCancel: false
                        });
                        return;
                    }
                    if (tel == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请填写手机号',
                            showCancel: false
                        });
                        return;
                    } else {
                        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel)) {
                            uni.showModal({
                                title: '提示',
                                content: '手机号有误,请重新填写',
                                showCancel: false
                            });
                            return;
                        }
                    }
                    if (content == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入个人介绍',
                            showCancel: false
                        });
                        return;
                    }
                    var tid = 0;
                    if (uni.getStorageSync('tid')) {
                        tid = uni.getStorageSync('tid');
                    }
                    var cardimgstr = that.cardimglist.join(',');
                    var companyimgstr = that.companyimglist.join(',');
                    var logoimglist = that.logoimglist;
                    var cityinfo = uni.getStorageSync('cityinfo');
                    var ctoken = uni.getStorageSync('ctoken');
                    var params = {
                        ctoken: ctoken,
                        areaid: areaid,
                        cityid: cityinfo.id,
                        companyname: companyname,
                        companycate: companycate,
                        companytype: companytype,
                        companyworker: companyworker,
                        mastername: mastername,
                        tel: tel,
                        address: address,
                        content: content,
                        lat: that.lat,
                        lng: that.lng,
                        cardimg: cardimgstr,
                        companyimg: companyimgstr,
                        thumb: logoimglist[0],
                        tid: tid
                    };
                    company.Updatecompany((data) => {
                        uni.showToast({
                            title: '编辑成功',
                            icon: 'none',
                            duration: 2000,
                            success: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        });
                    }, params);
                }
            });
        },

        doagree: function (e) {
            var isagree = e.detail.value;
            if (isagree.length > 0) {
                this.isagree = isagree[0];
            } else {
                this.isagree = 0;
            }

            //

            console.log(this.isagree);
        },

        chooseImg: function (e) {
            var that = this;
            var count = 9;
            var id = parseInt(e.currentTarget.dataset.id);
            if (id == 1) {
                count = 1;
            }
            uni.chooseImage({
                count: count,
                // 默认9
                sizeType: ['compressed'],
                // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

                    var tempFilePaths = res.tempFilePaths;
                    var imgs = [];
                    if (id == 1) {
                        that.logoimglist = [];
                        that.setData({
                            imgs1: tempFilePaths,
                            show1: 'block'
                        });
                    } else if (id == 2) {
                        that.imagelist = [];
                        that.imgs2 = tempFilePaths;
                        that.setData({
                            imgs2: tempFilePaths,
                            show2: 'block'
                        });
                    } else if (id == 3) {
                        that.imagelist = [];
                        that.imgs3 = tempFilePaths;
                        that.setData({
                            imgs3: tempFilePaths,
                            show3: 'block'
                        });
                    }

                    // var tempFilePaths = that.data.imgs

                    for (var s = 0; s < tempFilePaths.length; s++) {
                        console.log(tempFilePaths[s]);
                        that.uploadimg(tempFilePaths[s], id);
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        uploadimg: function (path, id) {
            //var uploadurl = app.util.geturl({ 'url': 'entry/wxapp/upload' });
            // var id = id;
            uni.showToast({
                icon: 'loading',
                title: '正在上传'
            });
            var that = this;
            var params = {
                path: path
            };
            company.uploadimg((data) => {
                console.log(data);
                if (id == 1) {
                    console.log(data.imgpath);
                    that.logoimglist.push(data.imgpath);
                    console.log(that.logoimglist);
                } else if (id == 2) {
                    that.imagelist.push(data.imgpath);
                } else if (id == 3) {
                    that.companyimglist.push(data.imgpath);
                }
            }, params);
        },

        previewImg1() {
            console.log('占位：函数 previewImg1 未声明');
        },

        goHousexy() {
            console.log('占位：函数 goHousexy 未声明');
        }
    }
};
function isHasElementOne(arr, value) {
    for (var i = 0, vlen = arr.length; i < vlen; i++) {
        if (arr[i] == value) {
            return i;
        }
    }
    return -1;
}
function isHasElementTwo(arr, value) {
    for (var i = 0, vlen = arr.length; i < vlen; i++) {
        if (arr[i]['id'] == value) {
            return i;
        }
    }
    return -1;
}
</script>
<style>
.container {
    background-color: #f5f5f5;
    min-height: 100%;
    margin-bottom: 20%;
}
.container .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container .main .title {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #888888;
}

.container .main .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}

.container .main .list .item {
    width: 700rpx;
    border-bottom: 1rpx solid #f5f5f5;
    align-self: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
}
.container .main .list .item .name {
    font-size: 14px;
    color: #a2a2a2;
}
.container .main .list .item .selectitem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #808080;
    font-size: 14px;
    height: 100rpx;
    line-height: 100rpx;
    background: #fff;
}

.container .main .list .item .selectitem input {
    height: 100rpx;
    width: 740rpx;
    color: #000;
    font-size: 18px;
}

.container .main .list .item .selectitem > image {
    width: 30rpx;
    height: 30rpx;
    align-self: center;
}

.radio {
    font-size: 18px;
}
.picker {
    font-size: 18px;
}
.container .main .checklist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    flex-wrap: wrap;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
}

.container .main .checklist checkbox-group {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.container .main .checklist .checkitem {
    font-size: 0.7rem;
    width: 240rpx;
    margin-top: 10rpx;
}

.container .doagree {
    font-size: 0.7rem;
    margin-left: 50rpx;
    margin-top: 40rpx;
    margin-bottom: 280rpx;
    padding-bottom: 50rpx;
}

.getpos {
    width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 0.7rem;
}

.container .main .imglist {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #fff;
}

.container .main .imglist .imgitem {
    width: 200rpx;
    border: 1rpx dotted #f5f5f5;
    position: relative;
}
.container .main .imglist .imgitem image {
    width: 200rpx;
    height: 200rpx;
}

.sum {
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background: #3274e5;
    top: -10rpx;
    left: 150rpx;
    color: #fff;
    z-index: 1000;
    font-size: 0.7rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.sum text {
    font-size: 0.7rem;
    align-self: center;
}

.weixinmao-msg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content {
    width: 720rpx;
    height: 450rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map {
    height: 850rpx;
}
.mapbtn {
    background: #3274e5;
    color: #fff;
    font-size: 1rem;
    width: 400rpx;
}
.weixinmao-content .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;

    width: 100%;
}

.weixinmao-foot view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    width: 50%;
    border-radius: 0rpx;
    padding-left: 30rpx;
    background: #e64340;
}
.weixinmao-foot button {
    background: #07b56d;
    width: 100%;
    color: #fff;
    border-radius: 0rpx;
    font-size: 1rem;
}

.ismaster {
    color: red;
    font-weight: bold;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 30rpx;
    align-self: center;
}

.masterbtn {
    margin-top: 100rpx;
    width: 400rpx;
    background: #3274e5;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 5rpx;
    text-align: center;
}

.selectitem textarea {
    width: 100%;
}

.weixinmao-msg-userinfo {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.weixinmao-content-userinfo {
    width: 650rpx;
    height: 100%;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.weixinmao-content-userinfo .userinfo-title {
    align-self: center;
    font-size: 1.2rem;
    margin-top: 40rpx;
}

.weixinmao-content-userinfo .userinfo-content {
    align-self: center;
    font-size: 0.9rem;
    padding: 25rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999999;
}

.weixinmao-content-userinfo .userinfo-img {
    align-self: center;

    font-size: 0.9rem;
}

.weixinmao-content-userinfo .userinfo-img image {
    align-self: center;

    width: 400rpx;
    height: 400rpx;
}
.userinfo-button {
    display: flex;
    flex-direction: row;
    width: 400rpx;

    align-items: baseline;
    padding-bottom: 20rpx;
}
.userinfo-button button {
    background: #44b549;
    font-size: 0.8rem;
    color: #fff;
    width: 300rpx;
}

.uploadlist {
    display: flex;
    width: 700rpx;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;
}
.uploadlist .title {
    width: 700rpx;
    color: #141c31;
    font-weight: bold;
    font-size: 1.1rem;
    align-self: left;
}

.uploadlist .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20rpx;
    width: 650rpx;
}

.uploadlist .title view:nth-child(2) {
    color: #808080;
    font-size: 0.7rem;
    font-weight: 300;
    margin-top: 10rpx;
}

.uploadlist .item .uploadimg {
    width: 300rpx;
    height: 300rpx;
    border-radius: 5rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uploadlist .item .uploadimg image {
    width: 120rpx;
    height: 120rpx;
}
.uploadlist .item .uploadimg .uploadtitle {
    color: #808080;
    font-size: 0.7rem;
}

.imgsbox {
    width: 690rpx;
    padding: 20rpx;
    margin: auto;
    background: #fff;
    border-radius: 0 0 14rpx 14rpx;
    border: 1px solid #d6d7dc;

    box-sizing: border-box;
    overflow: hidden;
}
.weui-cells {
    font-size: 30rpx !important;
}

.weui-cell::before {
    border-top: 1rpx solid #eee;
}
.upload-img-btn image {
    width: 185rpx;
    height: 185rpx;
}
.upload-img-btn {
    float: left;
}
.img {
    width: 185rpx;
    height: 185rpx;
    float: left;
    margin: 15rpx;
    position: relative;
    overflow: hidden;
}

.delete-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40rpx;
    width: 100%;
}
.img image {
    width: 185rpx;
    height: 185rpx;
}
.weui-select {
    border-right: none;
}
.weui-uploader__hd {
    float: left;
}
.weui-uploader__title {
    width: 150rpx !important;
}
.weui-label {
    width: 150rpx !important;
}
.upload-img-btn image {
    margin: 10rpx;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
</style>
